<template>
	<view class="home">
		<view class="swiper">
			<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" circular>
				<swiper-item v-for="item,index in list.slice(0,5)" :key="index">					
				<view class="swiper-item">
						<image :src="item.img" mode="aspectFill"></image>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view class="list">
			<view class="title">
				热映电影
			</view>
			<movieItem :list="list"></movieItem>
		<!-- 	<view class="item" v-for="item,index in list" :key="index" @tap="toDetails(item.id)">
				<view class="pic">
					<image :src="item.img" mode=""></image>
				</view>
				<view class="content">
					<view class="name">{{item.nm}}</view>
					<view class="cat">{{item.cat}}</view>
					<view class="dir">导演:{{item.dir}}</view>
					<view class="msg"></view>
					<view class="act">{{item.desc}}</view>
					<view class="showtime">{{item.showTimeInfo}}</view>
					<view class="info2">
						<view class="sc">评分:{{item.sc}}</view>
						<view class="wish">{{item.wish}}人想看</view>
					</view>
				</view>
			</view> -->
			<view class="bottom" v-if="!hasMore">
				我是有底线的...
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		onLoad,
		onReachBottom
	} from "@dcloudio/uni-app"
	import {
		ref,reactive
	} from "vue"
    import movieItem from "/components/movieItem.vue"
	onLoad(() => {
		getMoveList()
	})

	let list = ref([])
	// 分页
	const pageData = {
		page: 1,
		pageSize: 10,
	}
	const hasMore = ref(true)
	async function getMoveList() {
		let res = await uni.$get("https://wx.maoyan.com/mmdb/movie/v2/list/hot.json", {
			limit: pageData.pageSize,
			offset: (pageData.page - 1) * pageData.pageSize,
			ct: '西安'
		})
		console.log(res)
		if (res.statusCode == 200) {
			list.value = [...list.value, ...res.data.data.hot]
			hasMore.value = res.data.data.paging.hasMore
			console.log(list.value)
		}
	}
	onReachBottom(() => {
		console.log("toBottom：");
		if (hasMore.value) {
			pageData.page++
			getMoveList()
		}
	})
	function toDetails(id)
	{
		uni.navigateTo({
			url:"/pages/details/details?movieId="+id
		})
	}
</script>

<style lang="scss">
	swiper {
		height: 200px;
	}

	.swiper image {
		width: 100%;
	}

	.list {
		.title {
			color: $uni-color-main;
			font-weight: bold;
			margin: 10px;
			font-size: 30rpx;
		}

		.item {
			margin: 5px;
			border: 1px solid #ccc;
			padding: 5px;
			display: flex;
			justify-content: space-around;
			border-radius: 3px;
			box-shadow: 3px 3px 3px #eee;

			.pic {
				width: 180rpx;
				height: 250rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.content {
				// border: 1px solid green;
				width: 500rpx;
				font-size: 26rpx;
				display: flex;
				justify-content: space-around;
				flex-direction: column;

				.name {
					font-size: 30rpx;
					color: $uni-color-main;
				}

				.info1 {
					display: flex;


					.dir {
						width: 150rpx;
					}
				}

				.info2 {
					display: flex;

					.sc {
						width: 150rpx;
					}
				}
			}

		}
	    .bottom{
			text-align: center;
		}
	}
</style>